<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>多功能编码工具</title>
    <style>
        body {
            width: 350px;
            padding: 15px;
            font-family: 'Segoe UI', Arial, sans-serif;
            background-color: #f8f9fa;
            color: #333;
        }
        h3 {
            color: #2c3e50;
            margin: 15px 0 10px;
            font-size: 16px;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
        }
        .tab-buttons {
            display: flex;
            margin-bottom: 10px;
        }
        .tab-button {
            flex: 1;
            padding: 8px;
            background-color: #e0e0e0;
            border: none;
            cursor: pointer;
        }
        .tab-button.active {
            background-color: #3498db;
            color: white;
        }
        textarea {
            width: 100%;
            height: 100px;
            margin-bottom: 12px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: Consolas, monospace;
            resize: vertical;
        }
        button {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: background-color 0.2s;
        }
        button:hover {
            background-color: #2980b9;
        }
        .action-button {
            background-color: #2ecc71;
        }
        .action-button:hover {
            background-color: #27ae60;
        }
        pre {
            background-color: #f8f9fa;
            padding: 12px;
            border: 1px solid #e1e4e8;
            border-radius: 4px;
            white-space: pre-wrap;
            word-wrap: break-word;
            font-family: Consolas, monospace;
            font-size: 13px;
            line-height: 1.4;
            max-height: 200px;
            overflow-y: auto;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .copy-btn {
            width: 60px;
            padding: 5px;
            margin: 5px 0;
            background-color: #9b59b6;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: background-color 0.2s;
        }

        .copy-btn:hover {
            background-color: #8e44ad;
        }
    </style>
</head>
<body>
    <div class="tab-buttons">
        <button class="tab-button active" data-tab="json">JSON工具</button>
        <button class="tab-button" data-tab="base64">Base64</button>
        <button class="tab-button" data-tab="url">URL编解码</button>
        <button class="tab-button" data-tab="html">HTML实体</button>
    </div>

    <!-- JSON工具 -->
    <div id="json" class="tab-content active">
        <textarea id="inputJson" placeholder="在此输入JSON数据..."></textarea>
        <button id="formatJsonButton">格式化JSON</button>
        <button id="compareButton" class="action-button">比对JSON</button>
        <h3>格式化后的JSON</h3>
        <pre id="formattedJson"></pre>
        <h3>原始JSON</h3>
        <pre id="originalJson"></pre>
    </div>

    <!-- Base64工具 -->
    <div id="base64" class="tab-content">
        <textarea id="inputBase64" placeholder="输入要编码/解码的文本"></textarea>
        <button id="encodeBase64Button" class="action-button">Base64编码</button>
        <button id="decodeBase64Button">Base64解码</button>
        <h3>结果</h3>
        <pre id="base64Result"></pre>
    </div>

    <!-- URL编解码工具 -->
    <div id="url" class="tab-content">
        <textarea id="inputUrl" placeholder="输入要编码/解码的URL"></textarea>
        <button id="encodeUrlButton" class="action-button">URL编码</button>
        <button id="decodeUrlButton">URL解码</button>
        <h3>结果</h3>
        <pre id="urlResult"></pre>
    </div>

    <!-- HTML实体工具 -->
    <div id="html" class="tab-content">
        <textarea id="inputHtml" placeholder="输入要编码/解码的HTML"></textarea>
        <button id="encodeHtmlButton" class="action-button">HTML编码</button>
        <button id="decodeHtmlButton">HTML解码</button>
        <h3>结果</h3>
        <pre id="htmlResult"></pre>
    </div>

    <script src="../js/popup.js"></script>
</body>
</html>
